<template>
  <div>
    <div v-for="(option, index) in options" :key="index" class="option-item">
      <el-input
        v-model="option.label"
        :placeholder="`输入框 ${index + 1}`"
        style="width: 80%; margin-right: 10px"
      >
        <template #prepend>
          <el-checkbox
            v-model="option.checked"
            @change="handleCheckboxChange"
          />
        </template>
      </el-input>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="$emit('removeOption', index)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MultipleChoice',
  props: {
    options: {
      type: Array,
      default: () => []
    },
    correctAnswer: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听correctAnswer变化初始化选中状态
    correctAnswer: {
      immediate: true,
      handler(newVal) {
        if (Array.isArray(newVal)) {
          this.options.forEach(option => {
            option.checked = newVal.includes(option.value);
          });
        }
      }
    }
  },
  methods: {
    handleCheckboxChange() {
      // 发射所有被选中的选项值
      const checkedValues = this.options
        .filter(opt => opt.checked)
        .map(opt => opt.value);
      this.$emit('updateCorrectAnswer', checkedValues);
    }
  }
};
</script>
